<template>
  <div>
    <a-layout id="components-layout-demo-fixed-sider" style="min-height: 100vh">
      <f-sider></f-sider>
      <a-layout>
        <f-header></f-header>
        <a-row type="flex" style="flex: auto">
          <a-row>
            <f-articlesider></f-articlesider>
          </a-row>
          <a-layout-content
            :style="{ margin: '24px 16px 0', overflow: 'initial' }"
          >
            <div :style="{ padding: '24px', background: '#fff' }">
              <a-row type="flex" justify="space-between">
                <a-col class="disflex">
                  <div class="title mr1r">文章标签管理</div>
                </a-col>
                <a-col>
                  <a-button type="primary" @click="add((visible = true))"
                    >创建新文章标签</a-button
                  >
                </a-col>
              </a-row>
              <a-table
                :columns="columns"
                :rowKey="(data) => data.tag_id"
                :dataSource="data"
                :pagination="pagination"
              >
                <template slot="operation" slot-scope="data">
                  <a class="operation" @click="edit(data.tag_id, data.tag_name)"
                    >修改</a
                  >
                  <a class="operation" @click="del(data.tag_id)">删除</a>
                </template>
              </a-table>
              <a-modal
                title="创建文章标签"
                v-model="visible"
                @ok="okadd"
                cancelText="取消"
                okText="确定"
              >
                <p>
                  <a-row type="flex" align="middle">
                    <a-col class="disflex margin-right">
                      <div class>标签名称:</div>
                    </a-col>
                    <a-col class="disflex">
                      <a-input v-model="name" placeholder="请输入标签名称" />
                    </a-col>
                  </a-row>
                </p>
              </a-modal>
              <a-modal
                title="修改文章标签"
                v-model="editvisible"
                @ok="okedit"
                cancelText="取消"
                okText="确定"
              >
                <p>
                  <a-input v-model="name" placeholder="请输入标签名称" />
                </p>
              </a-modal>
              <div class="btn">
                <a-button class="ml1rem" type="primary" @click="back"
                  >返回</a-button
                >
              </div>
            </div>
            <f-footer></f-footer>
          </a-layout-content>
        </a-row>
      </a-layout>
    </a-layout>
  </div>
</template>
<script>
import articlesider from "../../components/layout/ArticleSider.vue";
import sider from "../../components/layout/Sider.vue";
import header from "../../components/layout/Header.vue";
import footer from "../../components/layout/Footer.vue";
const columns = [
  {
    title: "ID",
    dataIndex: "tag_id",
  },
  {
    title: "标签名称",
    dataIndex: "tag_name",
  },
  {
    title: "创建时间",
    dataIndex: "create_time",
  },
  {
    title: "操作",
    scopedSlots: { customRender: "operation" },
  },
];

const data = [];

export default {
  metaInfo: {
    title: "文章标签-文章管理",
  },
  data() {
    return {
      data,
      columns,
      article_cate_title: "",
      catid: 0,
      name: "",
      visible: false,
      editvisible: false,
      page: 1,
      pageSize: 10,
      pagination: {
        defaultPageSize: 5,
        total: 0,
        showTotal: (total) => `共 ${total} 条数据`,
        onChange: (page, pageSize) => this.changePage(page, pageSize), //点击页码事件
      },
    };
  },
  components: {
    "f-header": header,
    "f-sider": sider,
    "f-articlesider": articlesider,
    "f-footer": footer,
  },
  mounted() {
    this.$parent.tokenverify();
    this.getTagList();
    this.setsiders();
  },
  methods: {
    add() {},
    okadd() {
      const url = "/Admin/ArticleTag/addTag";
      const paramObj = {
        name: this.name,
        token: localStorage.getItem("token"),
      };
      this.$server.sl("POST", url, paramObj).then((res) => {
        if (res.code == 1) {
          this.$message.success("新增成功");
          this.name = "";
          this.visible = false;
          this.getTagList();
        } else if (res.code == 4001) {
          this.$router.push("/Auth/login");
          this.$message.warning("凭证失效，请重新登陆");
        } else {
          this.$message.warning("新增失败，请刷新重试");
        }
      });
    },
    okedit() {
      const url = "/Admin/ArticleTag/updateTag";
      const paramObj = {
        tag_id: this.tag_id,
        name: this.name,
        token: localStorage.getItem("token"),
      };
      this.$server.sl("POST", url, paramObj).then((res) => {
        if (res.code == 1) {
          this.$message.success("修改成功");
          this.name = "";
          this.tag_id = 0;
          this.editvisible = false;
          this.getTagList();
        } else if (res.code == 4001) {
          this.$router.push("/Auth/login");
          this.$message.warning("凭证失效，请重新登陆");
        } else {
          this.$message.warning("修改失败，请刷新重试");
        }
      });
    },
    edit(tag_id, tag_name) {
      this.editvisible = true;
      this.tag_id = tag_id;
      this.name = tag_name;
    },
    del(e) {
      var _this = this;
      this.$confirm({
        title: "该操作不可逆，确定删除该记录?",
        okText: "是的",
        okType: "danger",
        cancelText: "取消",
        onOk() {
          const url = "/Admin/ArticleTag/delTag";
          const paramObj = {
            tag_id: e,
            token: localStorage.getItem("token"),
          };
          _this.$server.sl("GET", url, paramObj).then((res) => {
            if (res.code == 1) {
              _this.getTagList();
              _this.$message.success("删除成功");
            } else if (res.code == 4001) {
              _this.$router.push("/Auth/login");
              _this.$message.warning("凭证失效，请重新登陆");
            } else {
              _this.$message.warning(res.msg);
            }
          });
        },
        onCancel() {},
      });
    },
    //获取文章标签
    getTagList: function () {
      const url = "/Admin/ArticleTag/getTagList";
      const paramObj = {
        page: this.page,
        pageSize: this.pageSize,
        token: localStorage.getItem("token"),
      };
      this.$server.sl("GET", url, paramObj).then((res) => {
         if (res.code == 1) {
          this.data = res.data;
        } else if (res.code == 4001) {
          this.$router.push("/Auth/login");
          this.$message.warning("凭证失效，请重新登陆");
        } else {
          this.$message.warning("获取文章分类失败，请刷新重试");
        }
      });
    },
    //翻页
    changePage: function (page, pageSize) {
      this.page = page;
      this.pageSize = pageSize;
      this.getlst();
    },
    //菜单选中设置
    setsiders() {
      this.$store.commit("updateselectedKeys", "5");
      this.$store.commit("updateSubmenu", "5-3");
    },
    //返回上一页
    back() {
      this.$router.go(-1);
    },
  },
};
</script>
<style scoped>
#components-layout-demo-fixed-sider .logo {
  height: 32px;
  background: rgba(255, 255, 255, 0.2);
  margin: 16px;
}
.title {
  margin: 0 0 10px;
  font-size: 20px;
}
.picurl {
  height: 3rem;
}
.operation:first-child {
  margin-right: 1rem;
}
.disflex {
  display: flex;
}
img {
  height: 2rem;
  width: 2rem;
}
.mr1r {
  margin-right: 1rem;
}
.btn {
  margin-top: 10px;
}
</style>